<script lang="ts" setup>
import { countBy, pairs } from "underscore";
import { computed, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { asyncselectuserquestion } from '../../../api';
import { Storekey } from '../../../interface';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { download2 } from '../../../util/code';
import { ALLTYPE } from "@/util/jianchatime";
import { MemberFinishTaskDetail } from '../team/type';

const router = useRouter()
const store = useStore(Storekey)
// 当前登录用户
const user = computed(() => {
    return store.state.user;
});
const teamid = computed(() => {
    return user.value?.teamid;
});
const props = defineProps<{
    selectedTask: Studycodemodel.Iteamjob,
    selectedMember: MemberFinishTaskDetail
    teamjobrelation: Studycodemodel.Iteamjobrelation[],
}>()
// 组装数据 将完成了的题目信息拼接到任务中的题目列表
const tableData = computed(() => {
    const data = props.teamjobrelation.map(e => {
        const questionDetail = userquestion.value.find(uq => uq.questionid === e.questionid) || {}
        return { ...e, ...questionDetail }
    })
    return data;
})
watch(props, e => {
    start()
})

onMounted(() => {
    start()
})
const userquestion = ref<Studycodemodel.Iuserquestion[]>([])
async function start() {
    const uqId = props.teamjobrelation.map(e => e.userquestionid)
    await asyncselectuserquestion({
        ID: uqId,
    }).then(({ rows }) => {
        userquestion.value = rows
    }).catch(err => {
        console.log(err)
    })
}

function acgroup(data?: Array<keyof Studycodemodel.IALLTYPE>) {
    if (Array.isArray(data)) {
        const c = countBy(data, (a) => {
            return a
        })
        return pairs(c)
    }
    return []
}
</script>

<template>
    <div class="taskItem-container-box">
        <div class="">
            <!-- <el-descriptions :title="props.selectedMember.name" :column="2" size="large">
            </el-descriptions> -->
        </div>
        <div class="">
            <el-table :data="tableData" style="width: 100%">
                <template v-slot:empty>
                    <el-empty image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png" />
                </template>
                <el-table-column prop="questionid" label="题目ID" width="">
                    <template #default="{ row }">
                        <router-link v-slot="{ href }" custom
                            :to="{ name: '题目', params: { ID: row.questionid }, query: { jobid: props?.selectedTask.ID } }">
                            <el-link target="_blank" :href="href">{{ row.questionid }} </el-link>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="题目名称" width="">
                    <template #default="{ row }">
                        <router-link v-slot="{ href }" custom
                            :to="{ name: '题目', params: { ID: row.questionid }, query: { jobid: props?.selectedTask.ID } }">
                            <el-link target="_blank" :href="href">{{ row.qName }}
                            </el-link>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="ID" label="提交答案">
                    <template #default="{ row }">
                        <el-button v-if="!row?.context" disabled plain type='primary' size="default">
                            暂未提交
                        </el-button>
                        <el-button v-else type='primary' plain size="default" v-show="row.type == '代码'"
                            @click="download2(row)">
                            查看源码
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="resultdataarr" label="测试点">
                    <template #default="{ row }">
                        <span v-if="Array.isArray(row.resultdataarr)">
                            <span :style="{ display: 'inline-block' }" v-for="(v, key) in acgroup(row.resultdataarr)"
                                :key="'a_' + key">
                                <span effect="dark" :class="ALLTYPE[v[0]][1]">{{ v[0] }}:{{ v[1] }}&nbsp;</span>
                            </span>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<style scoped></style>